<template>
  <div>
    <button class="btn" @click="$router.push('/home/swipemanage/swipeadd')">添加轮播图+</button>
    <el-table :data="pageList" style="width: 100%;display: flex;">
      <el-table-column type="index" label="序号" width="110"></el-table-column>
      <el-table-column label="图片" width="200">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img"
            :zoom-rate="1.2"
            :preview-src-list="[scope.row.img]"
            :initial-index="4"
            fit="cover"
            preview-teleported
          />
        </template>
      </el-table-column>
      <el-table-column prop="link" label="链接" width="200"></el-table-column>
      <el-table-column prop="alt" label="提示" width="200"></el-table-column>
      <el-table-column label="操作" width="310">
        <template #default="scope">
          <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          <el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.$index, scope.row)">
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :page-size="5" :total="list.length" v-model:current-page="page" />
    <button class="btn clear" @click="clear">清空轮播图</button>
  </div>
</template>

<script>
import { getswipe, deleteswpie, deleteall } from '../../service/banners';
export default {
  data() {
    return {
      list: [],
      page: 1
    };
  },
  created() {
    this.getList();
  },
  computed: {
    pageList() {
      return this.list.slice((this.page - 1) * 5, this.page * 5);
    }
  },
  methods: {
    getList() {
      getswipe().then(res => {
        // console.log(res.data);
        this.list = res.data;
      });
    },
    handleDelete(index, row) {
      console.log(row);
      deleteswpie({ bannerid: row.bannerid }).then(res => {
        // deleteswpie(row.bannerid).then(res => {
        // console.log(res);
        if (res.code === '200') {
          this.getList();
        }
      });
    },
    clear() {
      deleteall().then(res => {
        if (res.code === '200') {
          this.getList();
        }
      });
    }
  }
};
</script>
<style scoped>
.btn {
  background-color: #409eff;
  height: 34px;
  color: white;
  border: 0;
  border-radius: 5px;
  width: 120px;
  margin: 0px 0 20px;
  font-size: 14px;
  line-height: 34px;
}
.clear {
  background-color: #f56c6c;
  margin-left: 60%;
}
</style>